<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{gender}}</h2>
    <h2>学生年龄：{{myAge}}</h2>
    <button @click="updateAge">尝试修改年龄</button>
  </div>
</template>

<script>
export default {
  name: 'Student',
  data(){
    return{
      msg:'我是一个尚硅谷的学生',
      myAge: this.age,//vc从外部接收的数据优先被放到vc上
    }
  },
  //props:['name','gender','age'], //简单接收
  //接收的同时对类型进行限制
  // props:{
  //   name:String,
  //   age: Number,
  //   gender:String
  // }
  //接收的同时对类型限制+默认值+必要性
  props:{
    name:{
      type:String,
      required:true,
    },
    age:{
      type:Number,
      default:99,
    },
    gender:{
      type:String,
      required:true,
    }
  },
  methods:{
    updateAge(){
      this.myAge ++;
    }
  }
}
</script>
<style>
  .school{
    background-color: gray;
  }
</style>